<template>
	<view class="topclassify">
		<view class="topList" v-for="(top,index) in topList" :key="index" v-if="index<3" @click="navToDetailPage(top.pid,top.shop_id)">
			<image :src="topImg[index]" mode="widthFix"></image>
			<view class="left">
				<!-- <text class="name">{{top.cName}}</text> -->
				<!-- <text class="name">纽州甜橙</text> -->
				<!-- <text class="btn">立即购买</text> -->
			</view>
		</view>
		
		<view class="list-info" v-for="(top,index) in topList" :key="top.pid" v-if="index>2" @click="navToDetailPage(top.pid,top.shop_id)">
			<view class="goods-img">
				<image :src="top.defaultAlbum" mode="aspectFit"></image>
				<text class="pos-top">{{index+1}}</text>
				<!-- <image src="/static/img/2/2-1.png" mode="aspectFit" class="pos-top"></image> -->
			</view>
			<view class="goods-info">
				<view class="name clamp">
					{{top.pName}}
				</view>
				<view class="price">
					<text class="unit">￥</text>
					<text class="money">{{top.fSalePrice}}</text>
					<text class="sales-volume">销量:{{top.iSales}}{{top.unit_name}}</text>
				</view>
				<view class="icon-box">
					<image src="/static/img/2/2-28.png" mode="aspectFit"></image>
					<image src="/static/img/2/2-13.png" mode="aspectFit"></image>
					<image src="/static/img/2/2-19.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>


		<!-- 分享 -->
		<share ref="share" :contentHeight="900" :shareList="shareList"></share>
	</view>
</template>

<script>
	import share from '@/components/share';
	export default {
		name: "",
		components: {
			share
		},
		data() {
			return {
				shareList: [],
				topGoods: [],
				topImg:[],
				top1:"",
				top2:"",
				top3:"",
				tag_id:'',
				topList:''
			}
		},
	
		async onLoad(options) {
			this.tag_id = options.id
			
			this.shareList = await this.$api.json('shareList');
			this.getData()
		},
		methods: {
			getData() {
				//top单品
				this.$Request.post4(this.$api.httpApi.home.sales).then(res => {
					if (res.code == 1) {
						// this.freshGoods = res.data
						this.topList = res.data
						
					}
				})
				this.$Request.post4(
					this.$api.httpApi.home.getTopList
				).then(res => {
					if (res.code == 1) {
						this.topImg.push(res.data.top1)
						this.topImg.push(res.data.top2)
						this.topImg.push(res.data.top3)
						
					}
				})
				
				
			},
			getGoods(val, str) {
				this.freshGoods = []


				for (const i in val) {

					this.$Request.get(this.$api.httpApi.goods.iteminfo + '&id=' + val[i] + '&token=' + this.$SysCache.get('token')).then(
						res => {
							if (res.code == 200) {
								if (str == 2) {
									this.freshGoods.push(res.data)
								} else if (str == 3) {
									this.topGoods.push(res.data)
								} else if (str == 4) {
									this.readyGoods.push(res.data)
								}

							}
						})

				}
				this.$Request.post4(
					this.$api.httpApi.home.getTopList, {
						class_id: this.currentId
					}
				).then(res => {
					if (res.code == 1) {
						this.topImg.push(res.data.top1)
						this.topImg.push(res.data.top2)
						this.topImg.push(res.data.top3)
						
					}
				})


			},
			
			//详情页
			navToDetailPage(id,shop_id) {
				//测试数据没有写id，用title代替
				// let id = item.id;
				uni.navigateTo({
					url: `/pages/detail/index?id=${id}&iShopId=${shop_id}`
				})
			},

		},
		onNavigationBarButtonTap(e) {
			// console.log(e)

			this.$refs.share.toggleMask();


		}


	}
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
		padding: 21upx;
	}

	.topclassify {
		.topList {
			position: relative;
			background: #fff;

			image {
				width: 100%;
				// margin-top: 52upx;
				height: 368upx;
			}

			.left {
				position: absolute;
				top: 210upx;
				left: 60upx;

				.name {
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: rgba(4, 0, 0, 1);
					display: block;
				}

				.btn {
					margin-top: 70upx;
					width: 143upx;
					height: 40upx;
					background: rgba(240, 64, 111, 0);
					border: 1upx solid rgba(4, 0, 0, 1);
					border-radius: 29upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: rgba(4, 0, 0, 1);
				}
			}

			.right {
				position: absolute;
				top: 210upx;
				right: 60upx;

				.name {
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: rgba(4, 0, 0, 1);
					display: block;
				}

				.btn {
					margin-top: 70upx;
					width: 143upx;
					height: 40upx;
					background: rgba(240, 64, 111, 0);
					border: 1upx solid rgba(4, 0, 0, 1);
					border-radius: 29upx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: rgba(4, 0, 0, 1);
				}
			}
		}

		.list-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			background: #fff;
			margin-bottom: 10upx;

			.goods-img {
				width: 270upx;
				height: 270upx;
				background: rgba(255, 255, 255, 1);
				box-shadow: 0upx 0upx 16upx 0upx rgba(0, 0, 0, 0.08);
				position: relative;

				image {
					width: 100%;
					height: 100%;
					display: block;
					margin: 0;
				}

				.pos-top {
					width: 54upx;
					height: 54upx;
					position: absolute;
					top: 11upx;
					left: 22upx;
					background:#B79865;
					color: #fff;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					font-size: 26upx;
				}
			}

			.goods-info {
				flex: 1;
				height: 100%;
				padding: 65upx 20upx 65upx 68upx;
				overflow: hidden;
				.name {
					font-size: 27upx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: rgba(4, 0, 0, 1);
				}

				.price {
					font-family: Adobe Heiti Std;
					font-weight: normal;
					color: rgba(240, 64, 111, 1);

					.unit {
						font-size: 19upx;
					}

					.money {
						font-size: 25upx;
					}

					.sales-volume {
						font-size: 17upx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: rgba(136, 136, 136, 1);
						margin-left: 10upx;
					}
				}

				.icon-box {
					image {
						width: 27upx;
						height: 26upx;
						margin-right: 33upx;
					}
				}

			}


		}

	}
</style>
